<template>
    <div class="praise_stars">
      <div>
        <span v-for="(item,index) in itemClasses" class="iconfont" :class="item"></span>
      </div>
    </div>
</template>

<script>
  const LENGTH = 5;
  const CLS_ON = 'icon-icon'; // 全星
  const CLS_HALF = 'icon-unie615'; // 半星
  const CLS_OFF = 'icon-star'; // 空星
  export default {
    props:{
      starsNumber:{
        type:Number
      }
    },
    name: 'PraiseStars',
    data(){
      return {
        score: ''
      }
    },
    computed: {
      //* 计算显示星星
      itemClasses () {
        let result = []; // 返回的是一个数组,用来遍历输出星星
        let score = Math.floor(this.starsNumber * 2) / 2; // 计算所有星星的数量
        let hasDecimal = score % 1 !== 0; // 非整数星星判断
        let integer = Math.floor(score); // 整数星星判断
        for (let i = 0; i < integer; i++) { // 整数星星使用on
          result.push(CLS_ON);// 一个整数星星就push一个CLS_ON到数组
        }
        if (hasDecimal) { // 非整数星星使用half
          result.push(CLS_HALF);// 类似
        }
        while (result.length < LENGTH) { // 余下的用无星星补全,使用off
          result.push(CLS_OFF);// 类似
        }
        return result;
      }
    }
  }
</script>

<style scoped>
.praise_stars{
  color: #e6191e;
  font-size: 0.8rem;
}
</style>
